<template>
    <div class="example1-wrapper">
        <div class="inner">
            <span style="color:black;margin-left:520px;font-size:24px">洗衣价格表</span>
            <bk-table style="margin-top: 15px;"
                :data="data"
                height="500"
                :pagination="pagination"
                @page-change="handlePageChange"
                @row-mouse-enter="handleRowMouseEnter"
                @row-mouse-leave="handleRowMouseLeave">
                <bk-table-column label="序列" type="index" width="60"></bk-table-column>
                <bk-table-column label="衣服类型" prop="type"></bk-table-column>
                <bk-table-column label="洗衣模式" prop="Washmethod"></bk-table-column>
                <bk-table-column label="单价(元/件)" prop="price"></bk-table-column>
                <bk-table-column label="操作" width="150">
                    <template slot-scope="props">
                        <bk-button theme="primary" text @click="lookinfo(props.row)">修改</bk-button>
                        <bk-button theme="primary" text @click="showdelete(props.row)">删除</bk-button>
                    </template>
                </bk-table-column>
            </bk-table>
            <div style="margin-top:10px">
                <bk-button style="margin-left:450px;width:150px" theme="primary" @click="add">添加一个商品</bk-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        inject: ['reload'],
        data () {
            const user = sessionStorage.getItem('user')
            // console.log(user)
            if (user) {
                const username = JSON.parse(user)
                this.username = username
            }
            this.getprice(1)
            return {
                username: '',
                mername: '',
                data: [
                ],
                Merlist: [
                ],
                pagination: {
                    current: 1,
                    count: 0
                }
            }
        },
        methods: {
            /**
             * 获取页面数据
             *
             * @return {Promise} promise 对象
             */
            handlePageChange (page) {
                this.pagination.current = page
                this.getprice(page)
            },
            getprice (page) {
                const qs = require('qs')
                this.axios({
                    url: '/getprice_merchant/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        page: page,
                        merchant: JSON.parse(sessionStorage.getItem('user'))
                    })
                }).then(res => {
                    this.pagination.count = res.data.num
                    this.data = []
                    for (const i in res.data.result_data) {
                        const tmp = {
                            clothid: 0,
                            priceid: 0,
                            type: '',
                            Washmethod: '',
                            price: 0
                        }
                        tmp.clothid = res.data.result_data[i].id
                        tmp.price = res.data.result_data[i].price
                        tmp.type = res.data.result_data[i].type
                        if (res.data.result_data[i].Washmethod === 0) {
                            tmp.Washmethod = '普通洗'
                        }
                        if (res.data.result_data[i].Washmethod === 1) {
                            tmp.Washmethod = '超强洗'
                        }
                        this.$set(this.data, i, tmp)
                    }
                })
            },
            lookinfo (row) {
                this.$router.push({
                    name: 'mesaveprice',
                    query: {
                        id: row.clothid
                    }
                })
            },
            add () {
                this.$router.push({
                    name: 'meaddprice'
                })
            },
            showdelete (row) {
                const that = this
                this.$bkInfo({
                    type: 'warning',
                    title: '确认删除?',
                    confirmFn () {
                        that.mydelete(row.clothid)
                    }
                })
            },
            mydelete (clothid) {
                const qs = require('qs')
                this.axios({
                    url: '/deleteprice/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        id: clothid
                    })
                }).then(res => {
                    if (res.data.result === true) {
                        const h = this.$createElement
                        this.$bkInfo({
                            type: 'success',
                            title: '删除成功!',
                            showFooter: false,
                            subHeader: h('a', {
                                style: {
                                    color: '#3a84ff',
                                    textDecoration: 'none',
                                    cursor: 'pointer'
                                }
                            })
                        })
                    } else {
                        const a = this.$bkInfo({
                            type: 'error',
                            title: '删除失败',
                            subTitle: '此窗口3秒后关闭',
                            showFooter: false
                        })
                        let num = 3
                        const t = setInterval(() => {
                            a.subTitle = `此窗口${--num}秒后关闭`
                            if (num === 0) {
                                clearInterval(t)
                                a.close()
                            }
                        }, 1000)
                    }
                    this.getprice()
                })
            }
        }
    }
</script>

<style scoped>
</style>
